<template>
	<view class="searchBox">
		<view class="search" style="margin-top: 70rpx;">
			<u-search placeholder="搜索好友" v-model="keywords" :showAction="false" @search="onSearch"></u-search>
		</view>

		<view class="box">
			<view class="title dis-flex flex-y-center" v-if="love.avatar">
				<image src="/static/imgs/l_icon1.png" class="avatars" mode="widthFix" /> 我的情侣
			</view>
			<view class="list dis-flex flex-x-between flex-y-center" v-if="love.avatar">
				<image v-if="love.avatar" :src="IMG_URL + love.avatar" class="avatar" style="border-radius:50%;height: 80rpx;"
					 />
				<image v-else src="/static/imgs/tou.png" class="avatar" mode="widthFix" />
				<view class="flex-box dis-flex flex-x-between flex-y-center lines">
					<view class="name flex-box">{{ love.username }}</view>
					<view class="talk" @click="goChat(love.id)">去聊天</view>
					<u-icon name="more-dot-fill" color="#252525" size="22" @click="toSelect(love.id)"></u-icon>
				</view>
			</view>
			<view class="title dis-flex flex-y-center" v-if="bestie.avatar">
				<image src="/static/imgs/l_icon2.png" class="avatars" mode="widthFix" /> 我的闺蜜
			</view>
			<view class="list dis-flex flex-x-between flex-y-center" v-if="bestie.avatar">
				<image v-if="bestie.avatar" :src="IMG_URL + bestie.avatar" class="avatar" style="border-radius:50%;height: 80rpx;"
					/>
				<image v-else src="/static/imgs/tou.png" class="avatar" mode="widthFix" />
				<view class="flex-box dis-flex flex-x-between flex-y-center lines">
					<view class="name flex-box">{{ bestie.username }}</view>
					<view class="talk" @click="goChat(bestie.id)">去聊天</view>
					<u-icon name="more-dot-fill" color="#252525" size="22" @click="toSelect(bestie.id)"></u-icon>
				</view>
			</view>
			<view class="title dis-flex flex-y-center">
				<image src="/static/imgs/l_icon2.png" class="avatars" mode="widthFix" /> 朋友
			</view>
			<view class="list dis-flex flex-x-between flex-y-center" v-for="item in list" :key="item.id">
				<image v-if="item.user.avatar" :src="IMG_URL + item.user.avatar" class="avatar" style="border-radius:50%;height: 80rpx;"
					 />
				<image v-else src="/static/imgs/tou.png" class="avatar" mode="widthFix" />
				<view class="flex-box dis-flex flex-x-between flex-y-center lines">
					<view class="name flex-box">{{ item.user.username }}</view>
					<view class="talk" v-if="type !== ''" @click="yaoqing(item.user.id)">选择</view>
					<view class="talk" @click="goChat(item.user.id)">去聊天</view>
					<u-icon name="more-dot-fill" color="#252525" size="22" @click="toSelect(item.user.id)"></u-icon>
				</view>
			</view>
		</view>

		<!-- 弹窗 -->
		<view class="address-window" :class="selected == true ? 'on' : ''">
			<view class="wrap">
				<view class="toTalk" @click="gotoChat()">去聊天</view>
				<view class="del" @click="delfirend()">删除好友</view>
			</view>
		</view>
		<view class='mask' style="z-index: 999;" catchtouchmove="true" :hidden='selected == false' @click='close'></view>
		<ChatSign ref="addressWindow" :isSign='isSign' @changeClose="() => isSign = false"></ChatSign>
	</view>
</template>

<script>
import {
	IMG_URL,
} from "../../config/app.js";
import {
	myFriend, delFriend, signAgreement
} from "../../api/my.js";
import {
	storeMsg, sendMessage
} from "../../api/chat.js";
import env from '@/utlis/env.js';
import {
	getUserInfo,
} from "../../api/login.js";
import code from "../../uni_modules/uview-ui/libs/config/props/code.js";
import ChatSign from '@/components/chatSign'
export default {
	name: 'huGuan', // 互关
	components: {
		ChatSign
	},
	data() {
		return {
			IMG_URL: IMG_URL,
			keywords: '',
			selected: false,
			list: [],
			love: '',
			bestie: '',
			user_id: '',
			me: '',
			isSign: false,
			signImg: ''
		}
	},
	props: {
		type: {
			type: String,
			default: '',
		}
	},
	// 监听,当输入框清空时触发方法this.firend()
	watch: {
		keywords: {
			handler(newVal, oldVal) {
				this.firend()
			}
		}
	},
	created() {
		this.firend()
		let that = this
		uni.$on('sign', function (data) {
			that.signImg = data
		})
	},

	methods: {
		//发起邀请
		async yaoqing(user_id) {
			console.log(this.type, '-------------');
			let content = ''
			//调起签名
			if (!this.signImg) {
				this.isSign = true
			}else{
				if (this.type == 'love') {
					content = '我想和你成为情侣,等待对方处理请求....'
				}
				if (this.type == 'bestie') {
					content = '我想和你成为闺蜜,等待对方处理请求....'
				}
				let data = {
					'messageType': this.type,
					'user_id': user_id,
					'content': content,
					'signImg': this.signImg
				}
				console.log(data);
				const res = await sendMessage(data).then(res => {
					console.log(res, '发送消息');
					if (res.code == 1) {
						uni.showToast({
							'icon': 'none',
							'title': res.msg,
							'duration': 1500
						})
						
					}
					uni.showToast({
						'icon': 'none',
						'title': res.msg,
						'duration': 1500
					})
				});
			}
			
		},
		async firend() {
			const res = await myFriend().then(res => {
				console.log(res, '获取我的好友');
				this.love = res.data.love
				this.bestie = res.data.bestie
				this.list = res.data.list
				console.log(this.love.length);
				console.log(this.bestie);
			});

		},
		// 搜索
		async onSearch() {
			const res = await myFriend({
				search: this.keywords
			}).then(res => {
				console.log(res, '-------------');
				this.list = res.data.list
				this.love = res.data.love
				this.bestie = res.data.bestie
			})

		},
		//删除好友
		async delfirend() {
			const res = await delFriend({
				user_id: this.user_id
			}).then(res => {
				uni.showToast({
					title: res.msg,
					duration: 1500,
				});
				console.log(res, '删除我的好友');
				this.selected = false
				this.firend();
			});

		},


		toSelect(id) {
			this.selected = true
			this.user_id = id
		},
		close() {
			this.selected = false
		},
		gotoChat() {
			this.goChat(this.user_id)
		},
		//直接聊天
		async goChat(user_id) {
			console.log(user_id, 'sssssssssssssssss');
			//创建会话
			await storeMsg({
				'receiver_id': user_id
			}).then(res => {
				if (res.code == 1) {
					let data = res.data
					//跳转到聊天页面
					uni.navigateTo({
						url: '/pages/im/chat?data=' + JSON.stringify(data)
					})
				} else {
					uni.showToast({
						'title': res.msg,
						'icon': 'none',
						'duration': 1000

					})
				}

			});
		},

	}
}
</script>
<style lang="scss" scoped>
.searchBox {
	width: 100%;

	.search {
		padding: 20rpx 30rpx;
	}

	.box {
		padding: 22rpx 30rpx 0;

		.title {
			font-size: 28rpx;
			color: $uni-text-color-primary;

			.avatars {
				width: 36rpx;
				margin-right: 12rpx;
			}
		}

		.list {
			margin: 20rpx 0;

			.avatar {
				width: 80rpx;
				margin: 0 16rpx 0 0;
			}

			.lines {
				border-bottom: 1px solid #eee;
				padding: 28rpx 0;
			}

			.name {
				font-weight: bold;
				font-size: 32rpx;
				color: $uni-text-color;
			}

			.talk {
				width: 125rpx;
				height: 53rpx;
				line-height: 53rpx;
				text-align: center;
				background: #FFFFFF;
				border-radius: 26rpx;
				border: 1px solid $uni-text-color-primary;
				margin-right: 26rpx;
				font-size: 24rpx;
				color: $uni-text-color-primary;
			}
		}
	}

	.address-window {
		background: #F6F6F6;
		box-shadow: 0px 0px 30rpx 0px rgba(202, 202, 202, 0.6);
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 9999;
		transform: translate3d(0, 100%, 0);
		transition: all .3s cubic-bezier(.25, .5, .5, .9);
		border-radius: 30rpx 30rpx 0 0;
		padding: 40rpx 30rpx 100rpx;

		&.on {
			transform: translate3d(0, 0, 0);
		}

		.wrap {
			padding: 0 30rpx;
			background: #fff;

			.toTalk {
				padding: 35rpx 0;
				border-bottom: 1px solid #eee;
				font-size: 30rpx;
				color: $uni-text-color;
			}

			.del {
				font-size: 30rpx;
				color: #FE3849;
				padding: 35rpx 0;
			}
		}
	}
}
</style>